<template>
  <div class="disaster-events">
    <div class="title"></div>
    <div class="main">

    </div>

    <div class="summary-text">火灾总数（起）：17936</div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import LineEcharts from '@/components/echarts/lineChart.vue';

const echartsData = {
  label: ['4-12', '4-13', '4-14', '4-15', '4-16', '4-17', '4-18', '4-19'],
  data: [
    {
      name: '洪涝',
      value: [80, 82, 120, 110, 99, 101, 111, 99],
    },
    {
      name: '地震',
      value: [90, 89, 97, 99, 100, 104, 108, 101],
    },
    {
      name: '台风',
      value: [89, 82, 120, 110, 99, 101, 111, 99],
    },
    {
      name: '山火',
      value: [79, 89, 97, 99, 100, 104, 108, 101],
    },
    {
      name: '海啸',
      value: [27, 89, 97, 99, 100, 104, 108, 101],
    },
    {
      name: '雪灾',
      value: [27, 89, 97, 99, 100, 104, 108, 101],
    },
    {
      name: '地址灾害',
      value: [27, 89, 97, 99, 100, 104, 108, 101],
    },
    {
      name: '其他',
      value: [27, 89, 97, 99, 100, 104, 108, 101],
    },
  ],
};

defineComponent({ name: 'DisasterEvents' });
</script>

<style scoped lang="scss">
.disaster-events {
  @apply relative w-full h-full;

  .title {
    @apply w-full h-[31px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full h-[330px] mt-[30px];
    background: url('./assets/data-bg.png') no-repeat center;
    background-size: 100% 100%;
  }

  .summary-text {
    @apply absolute top-0 right-0 text-[16px] text-[#B2E1FF];
    font-family: Alibaba PuHuiTi;
  }
}
</style>
